Day 29 - 番外篇 - 在 Angular 專案安裝 Jest 測試框架 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 29

Modern Web

今天我想來在 Angular 應用程式上加上測試保護系列第 29 篇

Day 29 - 番外篇 - 在 Angular 專案安裝 Jest 測試框架

14th鐵人賽

阿壹

2022-10-14 10:12:39

1307 瀏覽

分享至

前言

在這一系列文章的一開始，我們使用了 Jasmine 框架來撰寫單元測試程式。然而，除了 Jasmine 之外，我們也可以在 Angular 專案內使用 Jest 框架來撰寫測試程式。

什麼是 Jest 框架

Jest 是一套由 Facebook 所開發的前端測試框架，常使用在 React 與 Vue 專案中。與 Jasmine 相同，Jest 裡內含了撰寫測試所需要的 API 語法；不同的是，Jest 本來也是測試的執行器，因此可以在 Ternimal 終端機直接使用 jest 命令來執行測試程式。

在 Angular 專案中安裝 Jest 框架

由於 Jest 本身是測試框架與執行器，因此一開始會把 Angular 專案內的 Jasmine 與 Karma 相關的套件移除掉，並安裝 Jest 相關套件。

npm uninstall @types/jasmine jasmine-core karma karma-chrome-launcherkarma-coverage karma-firefox-launcher karma-jasmine karma-jasmine-html-reporter karma-spec-reporter

npm install @types/jest eslint-plugin-jest jest jest-preset-angular

安裝 Jest 套件後，可以先在 package.json 檔案加入 Jest 的執行命令。

"scripts": {
  "test:jest": "jest",
  "test:jest-watch": "jest --watch",
  "test:jest-coverage": "jest --coverage"
}

接下來，在專案目錄下新增 jest.config.js 來設定 Jest 框架組態。

const { pathsToModuleNameMapper } = require("ts-jest");
const { compilerOptions } = require("./tsconfig");

module.exports = {
  preset: "jest-preset-angular",
  roots: ["<rootDir>/src/"],
  testMatch: ["**/+(*.)+(spec).+(ts)"],
  setupFilesAfterEnv: ["<rootDir>/src/test.ts"],
  collectCoverage: true,
  coverageReporters: ["html"],
  coverageDirectory: "coverage/my-app",
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths || {}, {
    prefix: "<rootDir>/",
  }),
};

在此組態中，除了指定了測試目錄路徑與檔案名稱外，也指定 Jest 框架在 Angular 專案中的預設設定；而此設定還需要在新建的 src/setupJest.ts 檔案中引用。

import 'jest-preset-angular';

另外，由於我們還是會使用 TypeScript 撰寫 Jest 測試程式，所以需要修改 tsconfig.spec.json 檔案所使用的測試框架。

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": ["jest"],
    "esModuleInterop": true,
    "emitDecoratorMetadata": true
  },
  "files": ["src/test.ts", "src/polyfills.ts"],
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}

最後，修改 src/test.ts 檔案，讓 Jest 相關的模組可以載入 Angular 的測試環境中。

import 'jest-preset-angular/setup-jest';

Object.defineProperty(window, 'CSS', { value: null });
Object.defineProperty(window, 'getComputedStyle', {
  value: () => {
    return {
      display: 'none',
      appearance: ['-webkit-appearance'],
    };
  },
});

Object.defineProperty(document, 'doctype', {
  value: '<!DOCTYPE html>',
});
Object.defineProperty(document.body.style, 'transform', {
  value: () => {
    return {
      enumerable: true,
      configurable: true,
    };
  },
});